import React, { useState } from 'react'
import { Badge, TabBar } from 'antd-mobile'
import style from '../../src/componets/css/tab.module.css'
import {useNavigate} from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

function tabbar() {
    const tabs = [
        {
          key: '/home',
          title: '首页',
          icon: <AppOutline />,
          badge: Badge.dot,
        },
        {
          key: '/list',
          title: '列表',
          icon: <UnorderedListOutline />,
          badge: '5',
        },
        {
          key: '/chart',
          title: '消息',
          icon: (active) =>
            active ? <MessageFill /> : <MessageOutline />,
          badge: '99+',
        },
        {
          key: '/my',
          title: '我的',
          icon: <UserOutline />,
        },
      ]
      const navigate=useNavigate()
      const tabchange=(key)=>{
        navigate(key)
      }
  return (
    <div className={style.box}>
        <TabBar onChange={tabchange}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default tabbar